<template>
    <div>
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" style='height:100vh;' :gap='30'
            v-if='$pcShow'>
            <div slot-scope="props" style="position: absolute;height: 100%;width: 100%;top: 0;">
                <img :src="imgsArr[props.index].src" alt="" preview='0' style="position: absolute;height: 100%;width: 100%;top: 0;opacity: 0;">
            </div>

        </vue-waterfall-easy>

        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" style='height:100vh;' :imgWidth='100'
            :gap='30' v-else>
            <div slot-scope="props" style="position: absolute;height: 100%;width: 100%;top: 0;">
                <img :src="imgsArr[props.index].src" alt="" preview='0'
                    style="position: absolute;height: 100%;width: 100%;top: 0;opacity: 0;">
            </div>
        </vue-waterfall-easy>

    </div>
</template>


<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import api from '../../api/nsgame'
export default {
    name: 'app',
    components: {
        vueWaterfallEasy
    },
    mounted() {
        this.getPhoto(this.$route.query.id)
    },
    data() {
        return {
            imgsArr: []
        }
    },
    methods: {
        async getPhoto(id) {
            try {
                let res = await api.getPhotoById(id)
                res.data.forEach(item => {
                    item.src = item.img
                })
                this.imgsArr = res.data
            } catch (err) {
                console.log(err)
                err.data.forEach(item => {
                    item.src = item.img
                })
                this.imgsArr = err.data
                setTimeout(() => {
                    let imgs = document.getElementsByTagName('img')
                    for (var i = 0; i < imgs.length; i++) {
                        imgs[i].setAttribute('preview', '0');
                    }

                }, 1000)
            }
        },
        fnClick(event, { index, value }) {
            event.preventDefault()
            // 只有当点击到图片时才进行操作
            if (event.target.tagName.toLowerCase() == 'img') {
                console.log('img clicked', index, value)
            }
        },
        getData() {
            for (var i = 1; i < 5; i++) {
                var randomH = Math.floor(Math.random() * 100) + 500
                this.imgsArr.push({ src: `https://source.unsplash.com/300x${randomH}` })
            }
        }
    },
}
// ::-webkit-scrollbar {
//     width: 0px;
// }
</script>

<style lang="">
.imgTitle {
    color: white;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #21212169;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
}
.vue-waterfall-easy-container .vue-waterfall-easy a.img-wraper > img {
    border-radius: 4px;
}
.vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
    position: relative;
}

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    height: 19px !important;
    width: 19px !important;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    border-radius: 1px;
    background-color: transparent;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background-color: #a1a1a1;
    transition: all 0.3s;
}
</style>
